<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>工单客户交互驱动执行日志</title>
        <style>
            /* Copy the CSS styles here */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: Arial, sans-serif;
                line-height: 1.6;
            }

            header {
                background-color: #333;
                color: white;
                text-align: center;
                padding: 1rem 0;
            }

            nav ul {
                list-style: none;
                text-align: center;
            }

            nav ul li {
                display: inline-block;
                margin-right: 1em;
            }

            nav ul li a {
                color: white;
                text-decoration: none;
                padding: .5rem 1rem;
                transition: background-color 0.3s ease;
            }

            nav ul li a:hover {
                background-color: #ff7f50;
            }

            main section {
                min-height: 100vh;
                padding: 2rem;
                text-align: center;
            }

            footer {
                background-color: #333;
                color: white;
                text-align: center;
                padding: 1rem 0;
                position: fixed;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="home">
                <h1>Welcome to My Website</h1>
                <p>This is a beautifully crafted webpage template.</p>
            </section>
            <section id="about">
                <h2>About Us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut...</p>
            </section>
            <section id="services">
                <h2>Our Services</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </section>
            <section id="contact">
                <h2>Contact Us</h2>
                <p>Contact us via email or phone...</p>
            </section>
        </main>
        <footer>
            <p>&copy; 2024 Your Company Name</p>
        </footer>
        <script>
            // Copy the JS code here
            document.querySelectorAll('nav ul li a').forEach(link => {
                link.addEventListener('mouseover', () => {
                    console.log(`Navigating to ${link.getAttribute('href')}`);
                });
            });
        </script>
    </body>

    </html>